<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>书法评价系统</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      body {
        font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
        line-height: 1.6;
        color: #333;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f9f9f9;
      }
      header {
        text-align: center;
        margin-bottom: 40px;
      }
      h1 {
        font-size: 2.5em;
        margin-bottom: 10px;
        color: #333;
      }
      .subtitle {
        font-size: 1.2em;
        color: #666;
        margin-bottom: 30px;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
      }
      .left-panel {
        flex: 1;
        min-width: 300px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      }
      .right-panel {
        flex: 2;
        min-width: 400px;
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      }
      .upload-container {
        margin-bottom: 30px;
        text-align: center;
      }
      .upload-box {
        border: 2px dashed #ccc;
        border-radius: 10px;
        padding: 40px 20px;
        text-align: center;
        cursor: pointer;
        margin-bottom: 20px;
        transition: all 0.3s ease;
      }
      .upload-box:hover {
        border-color: #666;
        background-color: #f0f0f0;
      }
      .upload-box i {
        font-size: 2em;
        color: #666;
        margin-bottom: 10px;
      }
      .upload-box p {
        margin: 10px 0;
      }
      .image-preview {
        max-width: 100%;
        margin-top: 20px;
        border-radius: 5px;
        display: none;
      }
      .btn {
        background-color: #4a6fdc;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1em;
        transition: background-color 0.3s;
      }
      .btn:hover {
        background-color: #3a5bba;
      }
      .btn:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
      .result-container {
        margin-top: 20px;
        display: none;
      }
      .result-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
      }
      .score-box {
        background-color: #4a6fdc;
        color: white;
        border-radius: 50%;
        width: 100px;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-right: 20px;
      }
      .score-value {
        font-size: 2em;
        font-weight: bold;
      }
      .score-label {
        font-size: 0.8em;
      }
      .result-comment {
        flex: 1;
      }
      .dimension-scores {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 30px;
      }
      .dimension-box {
        flex: 1;
        min-width: 180px;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }
      .dimension-name {
        font-weight: bold;
        margin-bottom: 10px;
        font-size: 1.1em;
      }
      .dimension-score {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .progress-bar {
        height: 8px;
        background-color: #eee;
        border-radius: 4px;
        flex: 1;
        overflow: hidden;
        margin-right: 10px;
      }
      .progress-fill {
        height: 100%;
        background-color: #4a6fdc;
        border-radius: 4px;
      }
      .dimension-level {
        font-size: 0.9em;
        color: #666;
        margin-bottom: 10px;
      }
      .dimension-suggestion {
        font-size: 0.95em;
        line-height: 1.5;
        color: #333;
      }
      .loading {
        text-align: center;
        display: none;
      }
      .spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border-left-color: #4a6fdc;
        animation: spin 1s linear infinite;
        margin: 20px auto;
      }
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .feedback-container {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #eee;
      }
      .hidden {
        display: none;
      }
      .error-message {
        color: #d9534f;
        margin-top: 10px;
        display: none;
      }

      /* 风格选择器样式 */
      .style-selector {
        margin: 20px 0;
        text-align: center;
      }

      .style-selector label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
      }

      .style-dropdown {
        width: 100%;
        max-width: 250px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: white;
        font-size: 1em;
        color: #333;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: border-color 0.3s, box-shadow 0.3s;
      }

      .style-dropdown:focus {
        outline: none;
        border-color: #4a6fdc;
        box-shadow: 0 0 0 3px rgba(74, 111, 220, 0.2);
      }

      .content {
        background-color: white;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-top: 20px;
      }
      .header {
        text-align: center;
        padding: 20px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #eee;
      }
      .score-card {
        background-color: #f5f5f5;
        border-left: 5px solid #007bff;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 3px;
      }
      .score {
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
      }
      .dimension-score {
        background-color: #e9ecef;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 3px;
      }
      .suggestion {
        background-color: #f0f5ff;
        padding: 10px;
        margin-top: 5px;
        border-radius: 3px;
        border-left: 3px solid #0d6efd;
      }
      .style-detection {
        background-color: #f0fff5;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 3px;
        border-left: 5px solid #198754;
      }
      .master-match {
        background-color: #fff0f5;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 3px;
        border-left: 5px solid #dc3545;
      }
      .progress {
        height: 10px;
        margin-bottom: 5px;
      }
      #loading {
        display: none;
        text-align: center;
        margin: 20px 0;
      }
      #evaluation-result {
        display: none;
      }
      .style-option {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .style-toggle {
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>书法评价系统</h1>
        <p class="text-muted">上传您的书法作品，获取专业评价和建议</p>
      </div>

      <div class="content">
        <form id="upload-form" enctype="multipart/form-data">
          <div class="mb-3">
            <label for="image" class="form-label">上传书法作品图片</label>
            <input
              type="file"
              class="form-control"
              id="image"
              name="image"
              accept="image/*"
              required
            />
          </div>

          <div class="form-check mb-3">
            <input
              class="form-check-input"
              type="checkbox"
              id="auto-detect"
              name="auto_detect"
              value="true"
              checked
              disabled
              hidden
            />
            <label class="form-check-label text-success fw-bold">
              <i class="bi bi-check-circle-fill"></i> 自动识别书法风格 (已启用)
            </label>
            <small class="d-block text-muted mt-1">
              系统将智能分析并识别您上传作品的书法风格
            </small>
          </div>

          <div class="form-check mb-3 mt-3">
            <input
              class="form-check-input"
              type="checkbox"
              id="perform-ocr"
              name="perform_ocr"
              value="true"
              checked
            />
            <label class="form-check-label" for="perform-ocr"
              >识别书法内容及出处</label
            >
            <small class="d-block text-muted mt-1">
              启用后系统将识别书法作品中的文字内容并判断出处
            </small>
          </div>

          <!-- 风格选择部分已移除，改为始终自动识别 -->
          <input type="hidden" name="style" value="auto" />

          <button type="submit" class="btn btn-primary w-100">提交评价</button>
        </form>

        <div id="loading">
          <div class="spinner-border text-primary" role="status"></div>
          <p>正在评价您的作品，请稍候...</p>
        </div>

        <div id="evaluation-result" class="mt-4">
          <!-- 风格识别结果 -->
          <div
            id="style-detection-section"
            class="style-detection mb-4"
            style="display: none"
          >
            <h4>风格识别结果</h4>
            <p>
              系统识别您的作品风格为：<strong id="detected-style"></strong
              >，置信度：<span id="detection-confidence"></span>%
            </p>
            <h5>各风格匹配度：</h5>
            <div id="style-probabilities"></div>
          </div>

          <!-- 名家相似度 -->
          <div
            id="master-matching-section"
            class="master-match mb-4"
            style="display: none"
          >
            <h4>名家风格匹配</h4>
            <p>您的作品风格与以下名家相似：</p>
            <div id="similar-masters"></div>
          </div>

          <!-- 评价结果 -->
          <h3 class="mb-3">评价结果</h3>

          <div class="score-card">
            <h4>总体评分</h4>
            <div class="score" id="total-score">0</div>
            <div class="progress">
              <div
                id="total-progress"
                class="progress-bar"
                role="progressbar"
                style="width: 0%"
              ></div>
            </div>
            <p id="overall-comment"></p>
          </div>

          <div id="style-fitness-section" class="mb-4" style="display: none">
            <h4>风格契合度</h4>
            <div class="dimension-score">
              <div class="d-flex justify-content-between">
                <span>风格契合度</span>
                <span id="style-fitness-score">0%</span>
              </div>
              <div class="progress">
                <div
                  id="style-fitness-progress"
                  class="progress-bar bg-info"
                  role="progressbar"
                  style="width: 0%"
                ></div>
              </div>
              <div class="suggestion" id="style-fitness-suggestion"></div>
            </div>
          </div>

          <h4>维度评分</h4>
          <div id="dimensions"></div>

          <div
            id="style-fitness"
            class="evaluation-section"
            style="display: none"
          >
            <h4>风格契合度</h4>
            <div class="progress">
              <div
                id="style-fitness-bar"
                class="progress-bar"
                role="progressbar"
                style="width: 0%"
                aria-valuenow="0"
                aria-valuemin="0"
                aria-valuemax="100"
              ></div>
            </div>
            <p id="style-fitness-text" class="mt-2"></p>
          </div>

          <!-- 新增：文本识别结果 -->
          <div
            id="text-recognition"
            class="evaluation-section"
            style="display: none"
          >
            <h4>文本识别结果</h4>
            <div class="card">
              <div class="card-body">
                <div id="recognized-text-container">
                  <h5>识别文本</h5>
                  <p id="recognized-text" class="mb-3 p-2 border bg-light"></p>
                </div>

                <div id="text-source" class="mt-3">
                  <h5>文本出处</h5>
                  <div id="source-details">
                    <div class="row">
                      <div class="col-md-3 text-secondary">作品名称:</div>
                      <div id="source-title" class="col-md-9">-</div>
                    </div>
                    <div class="row mt-1">
                      <div class="col-md-3 text-secondary">作者:</div>
                      <div id="source-author" class="col-md-9">-</div>
                    </div>
                    <div class="row mt-1">
                      <div class="col-md-3 text-secondary">朝代:</div>
                      <div id="source-dynasty" class="col-md-9">-</div>
                    </div>
                    <div class="row mt-1">
                      <div class="col-md-3 text-secondary">原文:</div>
                      <div id="source-full-text" class="col-md-9">-</div>
                    </div>
                    <div class="row mt-1">
                      <div class="col-md-3 text-secondary">匹配置信度:</div>
                      <div id="source-confidence" class="col-md-9">-</div>
                    </div>
                  </div>
                  <div
                    id="source-not-found"
                    class="alert alert-info mt-2"
                    style="display: none"
                  >
                    未能确定文本出处，请检查文本是否清晰可辨。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.getElementById("upload-form");
        const loading = document.getElementById("loading");
        const resultDiv = document.getElementById("evaluation-result");
        const autoDetectCheckbox = document.getElementById("auto-detect");
        const styleSelection = document.getElementById("style-selection");

        // 自动检测风格切换
        autoDetectCheckbox.addEventListener("change", function () {
          styleSelection.style.display = this.checked ? "none" : "block";
        });

        form.addEventListener("submit", function (e) {
          e.preventDefault();

          // 显示加载提示
          loading.style.display = "block";
          resultDiv.style.display = "none";

          // 发送评价请求
          const formData = new FormData(form);

          fetch("http://localhost:8081/evaluate", {
            method: "POST",
            body: formData,
          })
            .then((response) => {
              if (!response.ok) {
                return response.json().then((data) => {
                  throw new Error(data.error || "评价失败");
                });
              }
              return response.json();
            })
            .then((data) => {
              displayResults(data);
              loading.style.display = "none";
              resultDiv.style.display = "block";
            })
            .catch((error) => {
              alert("错误: " + error.message);
              loading.style.display = "none";
            });
        });

        function displayResults(data) {
          // 显示总分
          document.getElementById("total-score").textContent = data.total_score;
          document.getElementById("total-progress").style.width =
            data.total_score + "%";
          document.getElementById("overall-comment").textContent =
            data.overall_comment;

          // 显示风格识别结果
          if (data.style_detection) {
            document.getElementById("style-detection-section").style.display =
              "block";
            document.getElementById("detected-style").textContent =
              data.style_detection.best_style_name;
            document.getElementById("detection-confidence").textContent = (
              data.style_detection.confidence * 100
            ).toFixed(1);

            // 显示各风格匹配度
            const styleProbs = document.getElementById("style-probabilities");
            styleProbs.innerHTML = "";

            // 检查all_styles是否存在
            if (data.style_detection.all_styles) {
              Object.entries(data.style_detection.all_styles).forEach(
                ([style, info]) => {
                  const percent = (info.score * 100).toFixed(1);
                  styleProbs.innerHTML += `
                  <div class="mb-2">
                    <div class="d-flex justify-content-between">
                      <span>${info.name}</span>
                      <span>${percent}%</span>
                    </div>
                    <div class="progress">
                      <div class="progress-bar bg-success" role="progressbar" style="width: ${percent}%"></div>
                    </div>
                  </div>
                `;
                }
              );
            } else if (data.style_detection.style_probabilities) {
              // 兼容简化版服务器返回的格式
              Object.entries(data.style_detection.style_probabilities).forEach(
                ([style, probability]) => {
                  const percent = (probability * 100).toFixed(1);
                  const styleName =
                    {
                      regular: "楷书",
                      running: "行书",
                      cursive: "草书",
                      clerical: "隶书",
                      seal: "篆书",
                    }[style] || style;

                  styleProbs.innerHTML += `
                  <div class="mb-2">
                    <div class="d-flex justify-content-between">
                      <span>${styleName}</span>
                      <span>${percent}%</span>
                    </div>
                    <div class="progress">
                      <div class="progress-bar bg-success" role="progressbar" style="width: ${percent}%"></div>
                    </div>
                  </div>
                `;
                }
              );
            }
          }

          // 显示名家匹配结果
          if (data.similar_masters && data.similar_masters.length > 0) {
            document.getElementById("master-matching-section").style.display =
              "block";
            const mastersList = document.getElementById("similar-masters");
            mastersList.innerHTML = "";

            data.similar_masters.forEach((master) => {
              const percent = (master.similarity * 100).toFixed(1);
              mastersList.innerHTML += `
                <div class="mb-2">
                  <div class="d-flex justify-content-between">
                    <span>${master.name}</span>
                    <span>${percent}%</span>
                  </div>
                  <div class="progress">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: ${percent}%"></div>
                  </div>
                </div>
              `;
            });
          }

          // 显示风格契合度
          if (data.style_fitness) {
            document.getElementById("style-fitness-section").style.display =
              "block";
            document.getElementById("style-fitness-score").textContent =
              (data.style_fitness * 100).toFixed(1) + "%";
            document.getElementById("style-fitness-progress").style.width =
              data.style_fitness * 100 + "%";
          }

          // 显示维度评分
          const dimensionsDiv = document.getElementById("dimensions");
          dimensionsDiv.innerHTML = "";

          // 确保dimension_scores存在
          if (data.dimension_scores) {
            Object.entries(data.dimension_scores).forEach(([dim, score]) => {
              // 确保suggestions存在且包含当前维度
              const suggestion = data.suggestions && data.suggestions[dim];
              const suggestionHtml = suggestion
                ? `<div class="suggestion">${suggestion.suggestion}</div>`
                : "";

              dimensionsDiv.innerHTML += `
                <div class="dimension-score">
                  <div class="d-flex justify-content-between">
                    <span>${dim}</span>
                    <span>${score}</span>
                  </div>
                  <div class="progress">
                    <div class="progress-bar" role="progressbar" style="width: ${score}%"></div>
                  </div>
                  ${suggestionHtml}
                </div>
              `;
            });
          }

          // 显示风格契合度建议
          if (data.suggestions && data.suggestions["风格契合度"]) {
            document.getElementById("style-fitness-suggestion").textContent =
              data.suggestions["风格契合度"].suggestion;
          }

          // 显示风格契合度
          if (data.style_fitness) {
            document.getElementById("style-fitness").style.display = "block";
            document.getElementById("style-fitness-bar").style.width =
              data.style_fitness * 100 + "%";
            document.getElementById("style-fitness-text").textContent =
              (data.style_fitness * 100).toFixed(1) + "%";
          }

          // 显示文本识别结果
          if (data.text_recognition) {
            document.getElementById("text-recognition").style.display = "block";
            document.getElementById("recognized-text").textContent =
              data.text_recognition.recognized_text || "未能识别文字";

            // 检查是否存在出处信息
            if (
              data.text_recognition.source_info &&
              data.text_recognition.source_info.identified
            ) {
              document.getElementById("source-details").style.display = "block";
              document.getElementById("source-not-found").style.display =
                "none";

              // 填充出处信息
              document.getElementById("source-title").textContent =
                data.text_recognition.source_info.title || "-";
              document.getElementById("source-author").textContent =
                data.text_recognition.source_info.author || "-";
              document.getElementById("source-dynasty").textContent =
                data.text_recognition.source_info.dynasty || "-";
              document.getElementById("source-full-text").textContent =
                data.text_recognition.source_info.full_text || "-";
              document.getElementById("source-confidence").textContent =
                data.text_recognition.source_info.match_confidence || "-";
            } else {
              // 未找到出处
              document.getElementById("source-details").style.display = "none";
              document.getElementById("source-not-found").style.display =
                "block";
              if (
                data.text_recognition.source_info &&
                data.text_recognition.source_info.reason
              ) {
                document.getElementById("source-not-found").textContent =
                  data.text_recognition.source_info.reason;
              } else {
                document.getElementById("source-not-found").textContent =
                  "未能确定文本出处，请检查文本是否清晰可辨。";
              }
            }
          }
        }
      });
    </script>
  </body>
</html>
